import React, { useEffect, useState } from 'react';
import { Table, Button, Modal, message, Tag, Space } from 'antd';
import { PlusOutlined, EditOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite';
import { promptStore } from './store/promptStore';
import PromptForm from './PromptForm';
import { Prompt, PromptType, PromptStatus } from './store/promptTypes';
  
const PromptList: React.FC = observer(() => {

  const [viewType, seViewType] = useState<'create' | 'edit' | 'view'>('create');

  useEffect(() => {
    promptStore.fetchPrompts();
  }, []);

  const handleCreate = () => {
    seViewType('create');
    promptStore.showCreateModal();
  };

  const handleEdit = (prompt: any) => {
    seViewType('edit');
    promptStore.showEditModal(prompt);
  };

  const handleView = (prompt: any) => {
    seViewType('view');
    promptStore.showEditModal(prompt);
  };

  const handleDelete = async (id: string) => {
    try {
      await promptStore.deletePrompt(id);
    } catch (error) {
      message.error('删除失败');
    }
  };

  const handleModalOk = async (values: any) => {
    try {
      await promptStore.savePrompt(values);
    } catch (error) {
      message.error('保存失败');
    }
  };

  const columns = [
    {
      title: '提示词名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '提示词标识',
      dataIndex: 'identifier',
      key: 'identifier',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: PromptType) => (
        <Tag color={type === PromptType.SYSTEM ? 'blue' : 
                    type === PromptType.USER ? 'green' : 
                    type === PromptType.ASSISTANT ? 'purple' : 
                    type === PromptType.FUNCTION ? 'orange' : 
                    type === PromptType.TOOL ? 'cyan' : 'magenta'}>
          {type}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: PromptStatus) => (
        <Tag color={status === PromptStatus.PUBLISHED ? 'success' : 
                    status === PromptStatus.DRAFT ? 'default' : 
                    status === PromptStatus.DEPRECATED ? 'error' : 'warning'}>
          {status}
        </Tag>
      ),
    },
    {
      title: '版本',
      dataIndex: 'version',
      key: 'version',
    },
    {
      title: '标签',
      dataIndex: 'tags',
      key: 'tags',
      render: (tags: string) => (
        <Space>
           {tags && JSON.parse(tags)?.map(tag => (
            <Tag key={tag}>{tag}</Tag>
          ))}
        </Space>
      ),
    },
    {
      title: '是否公开',
      dataIndex: 'isPublic',
      key: 'isPublic',
      render: (isPublic: boolean) => (
        <Tag color={isPublic ? 'green' : 'default'}>
          {isPublic ? '公开' : '私有'}
        </Tag>
      ),
    },
    {
      title: '是否模板',
      dataIndex: 'isTemplate',
      key: 'isTemplate',
      render: (isTemplate: boolean) => (
        <Tag color={isTemplate ? 'blue' : 'default'}>
          {isTemplate ? '模板' : '普通'}
        </Tag>
      ),
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: Prompt) => (
        <Space size="middle">
          <Button
            type="link"
            icon={<EyeOutlined />}
            onClick={() => handleView(record)}
          >
            查看
          </Button>
          <Button
            type="link"
            icon={<EditOutlined />}
            onClick={() => handleEdit(record)}
          >
            编辑
          </Button>
          <Button
            type="link"
            disabled={true}
            danger
            icon={<DeleteOutlined />}
            onClick={() => handleDelete(record.id)}
          >
            删除
          </Button>
        </Space>
      ),
    }
  ];

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={handleCreate}>
          创建提示词
        </Button>
      </div>
      <Table
        columns={columns}
        dataSource={Array.isArray(promptStore.prompts) ? promptStore.prompts : []}
        rowKey="id"
        loading={promptStore.loading}
        locale={{ emptyText: '暂无数据' }}
      />
      <Modal
        title={
          viewType === 'create'
            ? '创建提示词'
            : viewType === 'edit'
            ? '编辑提示词'
            : '查看提示词'
        }
        open={promptStore.modalVisible}
        onCancel={promptStore.hideModal}
        footer={null}
        width={800}
        destroyOnClose
        bodyStyle={{
          maxHeight: 'calc(100vh - 200px)',
          overflow: 'auto',
          padding: '24px'
        }}
      >
        <PromptForm
          initialValues={promptStore.editingPrompt}
          type={viewType}
          onSubmit={handleModalOk}
          onCancel={promptStore.hideModal}
        />
      </Modal>
    </div>
  );
});

export default PromptList;